<template>
	<view class="all">
		<view class="headimg" @click="switchImg">
			<image :src="$request.baseUrl + form.headimg" mode="aspectFill"></image>
		</view>
		
		<view class="info">
			<view class="item">
				<image src="/static/my/user.png"></image>
				<input type="text" v-model="form.nickname" disabled />
			</view>
			<view class="item">
				<image src="/static/my/phone.png"></image>
				<input type="number" v-model="form.phone" disabled />
			</view>
			<view class="item">
				<image src="/static/my/QQ.png"></image>
				<input type="number" v-model="form.qq" disabled />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
			}
		},
		onLoad(option) {
			let userId = option.userId
			this.initUser(userId)
		},
		methods: {
			initUser(userId) {
				this.$request.get('/mini/user/info?userId=' + userId).then(res => {
					if (res.code === 200) {
						this.form = res.data
						
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.headimg {
		position: relative;
		width: 250rpx;
		height: 250rpx;
		margin: 90rpx auto;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
		}
		
		.edit {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 110rpx;
			height: 70rpx;
			background-color: #008676;
			border-top-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
		
		image {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			left: 100rpx;
		}
		input {
			width: 630rpx;
			height: 100rpx;
			padding-left: 100rpx;
			box-sizing: border-box;
			border: 4rpx solid rgba(233, 238, 243, 1);
			border-radius: 30rpx;
		}
	}
	
	.operate {
		margin-top: 120rpx;
		.update {
			height: 90rpx;
			width: 400rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
 			background: #008676;
			border-radius: 25rpx;
			font-size: 32rpx;
			color: #fff;
		}
		.logout {
			width: 120rpx;
			margin: 20rpx auto 0;
			text-align: center;
			font-size: 24rpx;
			color: #333;
		}
	}
</style>
